<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>我的银行卡</title>
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <!--<link rel="stylesheet" href="../../js/mui/css/mui.css">-->
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <style>
        .cards__item{
            border:1px solid #cccccc;
            margin:8px 5px;
            padding:10px 0;
            border-radius: 4px;
            background: -webkit-linear-gradient(left, #7F92D1 , #4C64B4); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #7F92D1, #4C64B4); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #7F92D1, #4C64B4); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #7F92D1 , #4C64B4); /* 标准的语法 */
            background: linear-gradient(to right, #7F92D1 , #4C64B4); /* 标准的语法 */
        }
        .cards__item a{
            color: #fff!important;
        }
        .card__icon{
            width:40px;
            height: 40px;
            overflow: hidden;
            border-radius: 50%;
            background: #ccc;
            margin: 7px 0 0 15px;
        }
        .card__type{
            font-size:12px;
        }
        .card__no{
            padding-top:5px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"><!--我的银行卡--></h1>
</header>
<div class="mui-content" id="cards" style="padding-bottom:90px;">
    <div class="cards__item"  v-for="(item,index) in 20">
        <a href="#delete">
        <div class="mui-row">
            <div class="mui-col-xs-3 mui-col-sm-3">
                <div class="card__icon">
                    <img src="../../images/logo.png" width="40" alt="">
                </div>
            </div>
            <div class="mui-col-xs-9 mui-col-sm-9">
                <div class="card__name">交通银行</div>
                <div class="card__type">储蓄卡</div>
                <div class="card__no">
                    **** **** **** 3233
                </div>
            </div>
        </div>
        </a>
    </div>
    <!--添加银行卡-->
    <div class="mui-button-fixed">
        <button id="add" type="button" class="mui-btn mui-btn-primary mui-btn-block">添加银行卡</button>
    </div>
    <p id="info"></p>
</div>
<!--删除银行卡-->
<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a tag="1" href="#" style="color: #FF3B30;">删除</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a tag="2" href="#delete"><b>取消</b></a>
        </li>
    </ul>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/cards/cards.js"></script>
<script>
</script>
</body>
</html>